<template>
    <div>
        <br/>
        <br/>
        <br/>
        <Head ref="steps"></Head>
        <el-form ref="elForm" :model="formData" :rules="rules" label-width="410px">
            <el-form-item label="贷款性质" prop="loanNature">
                <el-select v-model="formData.loanNature" placeholder="请选择贷款性质">
                    <el-option value="个人">个人</el-option>
                    <el-option value="企业">企业</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="贷款类型" prop="loanType">
                <el-select v-model="formData.loanType" placeholder="请选择贷款类型">
                    <el-option value="信用">信用</el-option>
                    <el-option value="抵押">抵押</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="贷款产品" prop="loanName">
                <el-select v-model="formData.loanName" placeholder="请选择贷款产品">
                    <el-option value="高薪贷">高薪贷</el-option>
                    <el-option value="薪保贷">薪保贷</el-option>
                    <el-option value="创业贷">创业贷</el-option>
                    <el-option value="房屋抵押贷">房屋抵押贷</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="贷款用途" prop="loanPurpose">
                <el-select v-model="formData.loanPurpose" placeholder="请选择贷款用途">
                    <el-option value="日常生活消费">日常生活消费</el-option>
                    <el-option value="创业消费">创业消费</el-option>
                    <el-option value="医疗消费">医疗消费</el-option>
                    <el-option value="购房、购车等消费">购房、购车等消费</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="还款方式" prop="payMethod">
                <el-radio-group v-model="formData.payMethod">
                    <el-radio label="等额本息">等额本息</el-radio>
                    <el-radio label="等本等息">等本等息</el-radio>
                    <el-radio label="先息后本">先息后本</el-radio>
                    <el-radio label="一次性还息付本">一次性还息付本</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="借款期限" prop="loanTerm">
                <el-radio-group v-model="formData.loanTerm">
                    <el-radio label="1">1个月</el-radio>
                    <el-radio label="3">3个月</el-radio>
                    <el-radio label="6">6个月</el-radio>
                    <el-radio label="9">9个月</el-radio>
                    <el-radio label="12">12个月</el-radio>
                    <el-radio label="18">18个月</el-radio>
                    <el-radio label="24">24个月</el-radio>
                    <el-radio label="32">32个月</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="申请金额" prop="loanMoney">
                <el-input type="number" v-model="formData.loanMoney" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="放款卡号" prop="bankCard">
                <el-input v-model="formData.bankCard" style="width: 220px"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm" class="btn1">提交</el-button>
    </div>
</template>
<style>
.btn1 {
    position: relative;
    left: 650px;
    top: 10px;
}
</style>
<script>
import Head from "../loan/loanHead.vue";
import addApply from "@/api/apply/index.js";
export default {
    components: {},
    props: [],
    data() {
        return {
            formData: {
                loanNature: "",
                loanType: "",
                loanName: "",
                loanPurpose: "",
                payMethod: "",
                loanTerm: "",
                loanMoney: "",
                bankCard: "",
            },
            rules: {
                loanNature: [
                    {
                        required: true,
                        message: "请选择贷款性质",
                        trigger: "blur",
                    },
                ],
                loanType: [
                    {
                        required: true,
                        message: "请选择贷款类型",
                        trigger: "blur",
                    },
                ],
                loanName: [
                    {
                        required: true,
                        message: "请选择贷款产品",
                        trigger: "blur",
                    },
                ],
                loanPurpose: [
                    {
                        required: true,
                        message: "请选择贷款用途",
                        trigger: "blur",
                    },
                ],
                payMethod: [
                    {
                        required: true,
                        message: "请选择还款方式",
                        trigger: "blur",
                    },
                ],
                loanTerm: [
                    {
                        required: true,
                        message: "请选择贷款期限",
                        trigger: "blur",
                    },
                ],
                loanMoney: [
                    {
                        required: true,
                        message: "请输入贷款金额",
                        trigger: "blur",
                    },
                ],
                bankCard: [
                    {
                        required: true,
                        message: "请输入放款卡号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/,
                        message: "银行卡号格式错误",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components: { Head },
    computed: {},
    watch: {},
    created() {this.initpage(); },
    mounted() { },
    methods: {
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    this.$refs.steps.active = 1;
                    this.$router.replace({ path: "/loanApply2" }); //路由转到loanApply2
                    addApply(this.formData)
                        .then((res) => { })
                        .catch();
                }
            });
        },
       initpage(){
            this.formData.loanName=this.$route.params.name.proName;
        }
    },
};
</script>
<style>

</style>
    